.hairlines {
	position: relative;
}

.hairlines-top:before,
.hairlines-bottom:before {
	position: absolute;
	content: '';
	height: 1px;
	width: 100%;
	background: red;
}

.hairlines-right:before,
.hairlines-left:before {
	position: absolute;
	content: '';
	height: 100%;
	width: 1px;
	background: red;
}

.hairlines-top:before {
	top: 0;
}

.hairlines-bottom:before {
	bottom: 0;
}

.hairlines-right:before {
	right: 0;
}

.hairlines-left:before {
	left: 0;
}

.border-hairlines {
	position: relative;
}

.border-hairlines:before {
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border: 1px solid red;
	border-radius: 4px;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
	.hairlines-top:before,
	.hairlines-bottom:before {
		/*核心是利用transform缩放边框*/
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.hairlines-right:before,
	.hairlines-left:before {
		/*核心是利用transform缩放边框*/
		-webkit-transform: scaleX(0.5);
		transform: scaleX(0.5);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.border-hairlines:before {
		width: 200%;
		height: 200%;
		transform: scale(0.5);
		transform-origin: left top;
	}
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
	.hairlines-top:before,
	.hairlines-bottom:before {
		/*核心是利用transform缩放边框*/
		-webkit-transform: scaleY(0.3);
		transform: scaleY(0.3);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.hairlines-right:before,
	.hairlines-left:before {
		/*核心是利用transform缩放边框*/
		-webkit-transform: scaleX(0.3);
		transform: scaleX(0.3);
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
	}

	.border-hairlines:before {
		width: 300%;
		height: 300%;
		transform: scale(0.33);
		transform-origin: left top;
	}
}
